<template>
  <div class="weekly_plan">
    <el-dialog
      title="周计划看板"
      v-dialogDrag
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      @closed="handleCloseDialog"
      width="960px"
      customClass="mes_dialog">
      <el-tabs class="mes_tabs" v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="当前周计划" name="now">
          <div class="table_dialog table_container">
            <el-table
              border
              stripe
              height="412px"
              ref="tableNode"
              :data="nowData"
              v-loading="isLoading"
              tooltip-effect="dark">
              <mes-col-comp
                :key="index"
                v-for="(column, index) in tableColConfig"
                :column="column">
              </mes-col-comp>
              <el-table-column
                label="操作"
                :resizable="false"
                fixed="right"
                show-overflow-tooltip
                align="center"
                min-width="100">
                <template slot-scope="scope">
                  <span class="jump_item"
                        @click.stop="$downByBlob(scope.row.uploadHistoryId, scope.row.fileName)">下载</span>
                  <span class="jump_item"
                        v-if="$checkPreviewName(scope.row.fileName)&&$checkPreviewSize(scope.row.fileSize)"
                        @click.stop="$previewFile(scope.row.uploadHistoryId)">预览</span>
                  <span class="jump_item is_disabled" v-else>预览</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="全部周计划" name="history">
          <mes-search-comp
            ref="mesSearch"
            :searchList="tableColConfig"
            :searchResult="searchResult"
            :searchSeniorShow=false
            @searchInfo="_info">
          </mes-search-comp>
          <div class="table_container">
            <el-table
              ref="tableNode"
              height="360px"
              border
              v-loading="isLoading"
              :data="historyData.list"
              tooltip-effect="dark">
              <mes-col-comp
                :key="index"
                v-for="(column, index) in tableColConfig"
                :column="column">
              </mes-col-comp>
              <el-table-column
                label="操作"
                :resizable="false"
                fixed="right"
                align="center"
                min-width="100">
                <template slot-scope="scope">
                  <span class="jump_item"
                        @click.stop="$downByBlob(scope.row.uploadHistoryId, scope.row.fileName)">下载</span>
                  <span class="jump_item"
                        v-if="$checkPreviewName(scope.row.fileName)&&$checkPreviewSize(scope.row.fileSize)"
                        @click.stop="$previewFile(scope.row.uploadHistoryId)">预览</span>
                  <span class="jump_item is_disabled" v-else>预览</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="mes_btn">
        <el-button @click="handleCloseDialog">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import FileIcon from '@/components/FileIcon'
import tableColConfig from './weeklyPlanCol'

export default {
  name: 'WeeklyPlan',
  components: {
    FileIcon
  },
  props: {
    list: {
      type: Array
    }
  },
  data() {
    return {
      tableColConfig: tableColConfig, // 列配置
      searchSeniorShow: true, // 是否显示高级搜索
      dialogVisible: false,
      activeName: 'now',
      searchData: {}, // 查询参数
      searchResult: NaN, // 搜索结果数,
      isLoading: false // 加载中
    }
  },
  computed: {
    // 当前周计划
    nowData() {
      return this.$store.state.workSheetManage.nowData
    },
    // 历史周计划
    historyData() {
      return this.$store.state.workSheetManage.historyData
    },
  },
  methods: {
    openDialog() {
      this.dialogVisible = true
      this.currentWeekPlan()
    },
    handleCloseDialog() {
      this.dialogVisible = false
      this.activeName = 'now'
    },
    // 当前周计划
    currentWeekPlan() {
      this.isLoading = true
      let getData = {
        method: 'get',
        url: 'a/weekplan/weekPlan/getCurrentWeekPlan',
        module: 'workSheetManage',
        state: 'nowData',
        data: {
          pageNo: 1,
          pageSize: 9999,
          query: {
            weekPlanStatusId: 'ID_WPS_Unconfirmed,ID_WPS_Confirmed'
          },
          sort: {
            planStartDate: 'desc'
          }
        }
      }
      if (Object.keys(this.searchData).length > 0) {
        getData.data.query = this.searchData
      }
      this.$store.dispatch('saveData', getData).then((res) => {
        if (Object.keys(this.searchData).length > 0) {
          this.searchResult = res.count
        } else {
          this.searchResult = NaN
        }
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 历史周计划
    historyWeekPlan() {
      this.isLoading = true
      let postData = {
        method: 'post',
        url: 'a/weekplan/weekPlan/list',
        module: 'workSheetManage',
        state: 'historyData',
        data: {
          pageNo: 1,
          pageSize: 9999,
          query: {
            weekPlanStatusId: 'ID_WPS_Unconfirmed,ID_WPS_Confirmed'
          },
          sort: {
            planStartDate: 'desc'
          }
        }
      }
      if (Object.keys(this.searchData).length > 0) {
        postData.data.query = this.searchData
      }
      this.$store.dispatch('saveData', postData).then((res) => {
        if (Object.keys(this.searchData).length > 0) {
          this.searchResult = res.count
        } else {
          this.searchResult = NaN
        }
      }).finally(() => {
        this.isLoading = false
      })
    },
    // tabs切换
    handleClick(tab, event) {
      if (this.activeName === 'currentWeekPlan') {
        this.currentWeekPlan()
      } else {
        this.historyWeekPlan()
      }
    },
    // 搜索方法
    _info(data) {
      this.searchData = data
      this.historyWeekPlan()
    },
  },
  created() {
    this.currentWeekPlan()
  },
}
</script>
<style lang="less" scoped>
  .weekly_plan {
    .operation {
      color: #00b4ff;
      display: flex;
      justify-content: space-around;

      .iconfont {
        cursor: pointer;

        &.disicon {
          cursor: not-allowed;
          color: #a1b1c1;
        }
      }
    }

    .mes_dialog .el-dialog__body {
      height: 271px;
      overflow-y: auto;
    }
  }

  .el-icon-close {
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 10;
    cursor: pointer;
  }
</style>
<style lang="less">
  .weekly_plan {
    .search_ordinary {
      margin: 20px 20px 0 0 !important;
    }

    .table_container {
      margin-top: 20px;
    }

    .table_dialog {
      thead th:first-child, tbody td:first-child {
        border-left: 1px solid #ebeef5;
      }
    }

  }
</style>
